<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>useSvg</title>
</head>
<body>
  <svg width="1000" height="1000">
    <!-- 绘制矩形 rx ry是圆角属性 -->
    <rect x="100" y="100" width="100" height="50" rx="20" ry="20"
     fill="orange" stroke-width="3" stroke="pink"></rect>

    <!-- 绘制圆形 cx,cy是圆心坐标 -->
    <circle cx="100" cy="300" r="40" style="fill: lightblue;"></circle>

    <!-- 绘制椭圆，ry是垂直方向半径，rx是水平方向半径 -->
    <ellipse cx="100" cy="500" ry="30" rx="50" style="fill: blanchedalmond;"></ellipse>

    <!-- 绘制直线 -->
    <line x1="100" y1="200" x2="200" y2="200" style="stroke: burlywood; stroke-width: 10"></line>

    <!-- 绘制多边形 points属性表示每个角的坐标，有几个角，points就有 n * 2个值 -->
    <polygon points="100, 700, 200, 500, 100, 650, 200, 760" 
      style="stroke: chocolate; stroke-width: 5; fill: darkgreen"
      transform="translate(100, 100)"></polygon>
  </svg>
</body>
</html>